<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
		<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		body{
			width: 100%;
			height: 100%;
			background-color: rgb(255,224,133);
			
		}

		#val{
			margin: auto;
			margin-top: 50px;
			padding-left: 10px; 
			padding-top: 5px;
			width: 400px;
			height: 150px;
			background-color: rgb(245,245,245);
			
			border: 1px solid #cccccc;


		}
		#username{
			width: 380px;
			height:40px;
			border-radius: 5px;
		}
		#val_anniu{
			padding-top: 20px;
			text-align: center;

		}
		#val_anniu button{
			width: 90px;
			height: 40px;
			border: 0;
			border-radius: 5px;
			margin:0 40px;
			background-color: black;
			color: white;
		}
		.product{
			margin: auto;
			margin-top: 10px;

			width: 410px;
			height: auto;
			line-height: 45px;
			background-color: white;
			
			border: 1px solid #cccccc;
			display: none;

		}
		.product h5{
		background-color: rgb(245,245,245);
		font-size: 15px;


		}
		.product h5,#product div{
			border-bottom: 1px solid #cccccc;
			padding-left: 10px; 

		}
		.product p{
			border-bottom: 1px solid #cccccc;
			line-height: 18px;
			padding: 20px 10px;
			color: rgb(33,33,33);
			
		}
		.input0{
			width: 100%;
			
			border-bottom: 1px solid #cccccc;
		}
		.input0 a{
			padding-left: 10px; 

		}
		.input0 a input{

			width: 250px;
			height:30px;
			border-radius: 5px;

		}
		#information{
			width: 90px;
			height: 40px;
			border: 0;
			border-radius: 5px;
			margin:0 40px;
			background-color: black;
			color: white;

		}
		#tell_ts{
			float: right;
			font-size: 8px;
			padding-right: 10px;
			color: red;
			display: none;
		}

			
		</style>
		
		
	</head>
	<body>
		  <div id="val">
		  	
		  	     
		  	     <div id="val_inpout">
		  	     	<div id="val_zhuti" >请输入商品验证码 </div>
		  		 	  <input  type="text" name="" id="username" value="" />
		  	     </div>
		  	     <div id="val_anniu">
		  	     		<button id="search">立即查询</button>
		  	     		<button id="reset" onclick="location.reload();">重新输入</button>
		  	     </div>
		  </div>
		  <div id="productq"class="product">
		  	  <h5>你查询的认证码为：</h5>
		  	  <h5 class="zzm"> ssd</h5>
		  	  <P >恭喜你认证成功！你购买的是当陈浩略儿子一年体验卡。恭喜你认证成功！你购买的是当陈浩略儿子一年体验卡。恭喜你认证成功！你购买的是当陈浩略儿子一年体验卡。恭喜你认证成功！你购买的是当陈浩略儿子一年体验卡。恭喜你认证成功！你购买的是当陈浩略儿子一年体验卡。</P>
		  	  <p>请登记你的个人信息，就可以正式成为陈家的一员。请登记你的个人信息，就可以正式成为陈家的一员。请登记你的个人信息，就可以正式成为陈家的一员。请登记你的个人信息，就可以正式成为陈家的一员。请登记你的个人信息，就可以正式成为陈家的一员。请登记你的个人信息，就可以正式成为陈家的一员。</p>

		  	  
		  		<div class="input0"> 	<a>姓&nbsp;&nbsp;&nbsp;名：<input  type="text" name="" id="usrname" value="" /></a></div>
		  		 	 <div class="input0"> <a> 电&nbsp;&nbsp;&nbsp;话：<input  type="text" name="" id="phone" value="" /></a><span id="tell_ts">电话无效</span></div> 
		  		 	   <div class="input0">  <a>购买地：<input  type="text" name="" id="Purchase" value="" /></a></div> 
		  		 	   <div class="input0">   <a>使用地：<input  type="text" name="" id="Use" value="" /></a></div> 
		  		 	  <div class="input0"> <button id="information">登记信息</button> </div> 
		  		 	  
		  		 	  
		  	     
		  </div>
		  <div id="productl" class="product">
		  	  <h5>你查询的认证码为：</h5>
		  	  <h5 class="zzm"> ssd</h5>
		  	  <p id="p1">认证失败他是你假冒的儿子</p>
		  </div>


		  <div id="productk"class="product">
		  	  <h5>你查询的认证码为：</h5>
		  	  <h5 class="zzm"> ssd</h5>
		  	  <P >恭喜你认证成功！你购买的是当陈浩略儿子一年体验卡。恭喜你认证成功！你购买的是当陈浩略儿子一年体验卡。恭喜你认证成功！你购买的是当陈浩略儿子一年体验卡。恭喜你认证成功！你购买的是当陈浩略儿子一年体验卡。恭喜你认证成功！你购买的是当陈浩略儿子一年体验卡。</P>
		  	  <p id="chaxun"></p>

		  	  
		  		<div class="input0"> 	<a>姓&nbsp;&nbsp;&nbsp;名：<span id="xsname"></span> </a></div>
		  		 	 <div class="input0"> <a> 电&nbsp;&nbsp;&nbsp;话：<span id="xsphone"></span></a></div>
		  		 	   <div class="input0">  <a>购买地：<span id="xsPurchase"></span></a></div> 
		  		 	   <div class="input0">   <a>使用地：<span id="xsUse"></span></a></div> 
		  		 	 
		  		 	  
		  	     
		  </div>

		  
	</body>
</html>
<script type="text/javascript">	
	var time=new Date();
	
	 $('#information').on('click', function() {	
	 	function isTelCode(str) {
             var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
               return reg.test(str);
            }
            if (!isTelCode(document.getElementById("phone").value)) {

            	document.getElementById("phone").focus();
            	document.getElementById("tell_ts").style.display="block";
		       return false;  
            }
	 	var inp_name=$('#usrname').val();
	 	var inp_phone=$('#phone').val();
	 	var inp_Purchase=$('#Purchase').val();
	 	var inp_Use=$('#Use').val();
	 	$("#xsname").text(inp_name);
	 		$("#xsphone").text(inp_phone);
	 			$("#xsPurchase").text(inp_Purchase);
	 				$("#xsUse").text(inp_Use);
	 				$("#chaxun").text("此认证码再您认证之后将失效，不能再进行认证和查询！最后一次查询时间"+time.toLocaleString()+"。");
	 	 $('#productk').css('display','block');
	 	   $('#productq').css('display','none');
	 	   $('#productl').css('display','none');


	  })

	  $('#search').on('click', function() {	
	  	$('#usrname').val("");
	  	$('#phone').val("");
	 	$('#Purchase').val("");
	 	$('#Use').val("");
	  	


	  	   var val = $('#username').val();
	  	  // if (val==0) {
	  	  // 	$('#productl').css('display','block');
	  	  // 	$('#productq').css('display','none');
	  	  // }else{
	  	  // 	$('#productq').css('display','block');
	  	  // 	$('#productl').css('display','none');
	  	  // }
	  	   
	  	        	

	  	   $('.zzm').text($('#username').val());
	  	   $.get('http://127.0.0.1:8000/users/'+ val +'/count/',  { usernames: val   },  function(data) {
	  	   	console.log(data.count);
	  	   	alert(data.count);


	  	   	    if (data.count == 0) {
	  	   	       $('#productl').css('display','block');
	  	  	       $('#productq').css('display','none');
	  	  	       $('#productk').css('display','none');
	  	   	    	
	  	   	    } else {
	  	   	    	$('#productq').css('display','block');
	  	        	$('#productl').css('display','none');
	  	        	$('#productk').css('display','none');
	  	   	    }

	  	   	      console.log(typeof data, data);
	  	   })
	  })
</script>